<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../css/login.css" />
  </head>
  <body>
    <div id="loginPage">
      <div id="loginBox">
        <h1>
          数&nbsp;&nbsp;字&nbsp;&nbsp;化&nbsp;&nbsp;档&nbsp;&nbsp;案&nbsp;&nbsp;管&nbsp;&nbsp;理&nbsp;&nbsp;平&nbsp;&nbsp;台
        </h1>
        <form action="./index.html" )>
          <div id="prompt">账户密码登录</div>
          <div class="form-group">
            <input
              type="test"
              class="form-control"
              id="tel"
              placeholder="请输入账号"
            />
            <span></span>
          </div>

          <div class="form-group">
            <input
              type="password"
              class="form-control"
              id="pass"
              placeholder="请输入密码"
            />
            <span></span>
          </div>

          <div class="login">
            <div>
              <input type="checkbox" class="optionBox" />
              <span>自动登录</span>
            </div>
            <button type="submit" class="btn-lg btn btn-primary">登录</button>
          </div>
        </form>
      </div>
    </div>
    <script>
      //一上来就初始化数据
      var data = [
        {
          tel: "15883289781",
          pass: "289781",
        },
        {
          tel: "13541966178",
          pass: "966178",
        },
        {
          tel: "15244834907",
          pass: "834907",
        },
        {
          tel: "18728711450",
          pass: "711450",
        },
        {
          tel: "18781727533",
          pass: "727533",
        },
        {
          tel: "18048428203",
          pass: "428203",
        },
        {
          tel: "15609076673",
          pass: "076673",
        },
        {
          tel: "13219093664",
          pass: "093664",
        },
      ];
      localStorage.setItem("user", JSON.stringify(data));
    </script>
    <script>
      var oF = document.querySelector("form");
      var oUser = document.querySelector("#tel");
      var oPass = document.querySelector("#pass");

      oUser.onblur = function () {
        var user = oUser.value;
        var reg1 = /^1[3-9]\d{9}$/;

        console.log(user);
        console.log(reg1.test(user));
        if (reg1.test(user)) {
          oUser.nextElementSibling.innerHTML = "√";
          oUser.nextElementSibling.style.fontWeight = "bolder";
          oUser.nextElementSibling.style.color = " #2cbf5a";
        } else {
          oUser.nextElementSibling.innerHTML = "X";
          oUser.nextElementSibling.style.fontWeight = "bolder";
          oUser.nextElementSibling.style.color = " red";
        }
      };
      oPass.onblur = function () {
        var reg2 = /^[a-z0-9]{6,12}$/;
        var pass = oPass.value;
        console.log(reg2.test(pass));
        if (reg2.test(pass)) {
          oPass.nextElementSibling.innerHTML = "√";
          oPass.nextElementSibling.style.fontWeight = "bolder";
          oPass.nextElementSibling.style.color = " #2cbf5a";
        } else {
          oPass.nextElementSibling.innerHTML = "X";
          oPass.nextElementSibling.style.fontWeight = "bolder";
          oPass.nextElementSibling.style.color = " red";
        }
      };
      oF.addEventListener("submit", login);
      function login() {
        var tel = oUser.value;
        var pass = oPass.value;
        //验证账户是否存在
        var data = JSON.parse(localStorage.getItem("user"));
        var index = test(data, tel, pass);
        if (index != -1) {
          //存在
          alert("登录成功");
          //存用户名
          localStorage.setItem("username", data[index].tel);
        } else {
          //不存在
          alert("登陆失败");
          event.preventDefault();
        }
      }
      function test(userData, username, password) {
        for (var i = 0; i < userData.length; i++) {
          if (userData[i].tel == username && userData[i].pass == password) {
            return i;
          }
        }
        return -1;
      }
    </script>
  </body>
</html>
